有時團隊在溝通時，僅靠設計稿討論，會有雞同鴨講或理解錯誤的問題，prototype可以把靜態的設計稿，透過 figma 提供的動畫效果，模擬出實際的互動情境，讓討論及溝通更順暢。在設計系統中 component 的互動情境也可以用 prototype 來完成，例如：點擊 checkbox 勾選，再點擊 checkbox 取消勾選。

我們就以 checkbox為例：

prototype 製作：

1. 先製作一個 checkbox 的 component，新增一個 variant 。（若忘記如何做，請往回看component 篇、variant 篇）
   沒勾勾的 variant 屬性名稱：no
   有勾勾的 variant 屬性名稱：yes
2. 點選 component，右側面版切換到「Prototype」頁籤。
3. 點選 variant (no) 下方會出現一個圓形＋號的 icon，點擊 icon 並拖曳到 有勾勾 variant（yes） 身上，會彈出設定視窗，基本上可以不用動，直接按右上角的 X 關閉即可。
4. 重覆3.的做法，這次從有勾勾的 variant（yes）往上拖曳到 沒勾勾 variant（no）身上，關閉彈出設定視窗。
5. 完成之後再回來看 component，就會發現兩個 variant 之間多了兩條有箭頭的線，這就是prototype的流程。

prototype測試：

1. 從 component 裡，點選 no variant ，option + 拖曳出分身（ instance）
2. 按 shift + 空白鍵，預覽 prototype，點擊就可以看到 checkbox 的勾選／未勾選的效果。
   

UI 的設計大致可分為下列幾個階段：

1. 資訊架構確認 (Information Architecture)
2. 功能地圖繪製 (Functional Map)
3. 線框稿繪製（Wireframe）
4. UI flow（user flow）
5. 雛型繪製（Mockup）
6. 互動原型（Prototype）

prototype 排在最後一個，可見到了這個階段完成後 UI 大致上算完成了。prototype 比較常應用在 Demo 及團隊討論上，其應用很廣，小到一個按鈕的切換，大到一個功能 flow 的轉場，都可以用prototype 來展現，但因為這次的挑戰主題是「 Design System」，比較 focus 在有系統的規劃 UI 組件上，所以 prototype 就介紹到這裡，若想更深一層了解 prototype，再請捧油們自行鑽研喔！